<script setup>
const state=reactive({
  lineColor:$c.gyl3,
  fontColor:$c.bk,
  chartData:{
    legend:['本地', '异地'],
    xAxis:['M1', 'M2', 'M3', 'M4', 'M5', 'M6', 'M7', 'M8', 'M9', 'M10', 'M11', 'M12'],
    colors:[$c.aql4,$c.bll5,$c.ipl3,$c.cbl3,],
    data:[
      [ 230, 210,220,179,123, 120, 132, 101,168, 181, 134, 126, 134, 190, ],
      [ 301, 334, 390, 330,300,240,235, 210, 187, 212, 278, 220, 320, 302,],
    ],
  },
  chartOption:{}
})

const {lineColor,fontColor}=toRefs(state)

const processData=()=>{
  let legend=state.chartData.legend,
      colors=state.chartData.colors,
      xAxis=state.chartData.xAxis,
      data=state.chartData.data,
      processedData=[]
  legend.forEach((item,i)=>{
    processedData.push({
      name: legend[i],
      type: 'line',
      barWidth:15,
      label: {
        show: false,
        position: 'insideRight'
      },
      itemStyle:{
        color: colors[i],
        borderRadius: 5
      },
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: colors[i]
        }, {
          offset: 1,
          color: $c.fade(colors[i],.1)
        }], false),
        // shadowcolor: $c.fade(colors[i],0),
        shadowBlur: 10
      },
      data: data[i]
    })
  })
  state.chartOption.series=processedData;
  state.chartOption.xAxis.data=xAxis;
  state.chartOption.legend.data=legend;
}

const processOption=()=>{
  state.chartOption={
    update:false,
    // title:{ text:"barA", left:200, top:0, textStyle:{ color:$c.gyl3, fontSize:16, fontWeight:"normal" }, },
    tooltip: {
      trigger: 'axis',
      axisPointer: { 
        type: 'shadow'
      }
    },
    legend: {
      show:true,
      data: [],
      top:"5",
      right:10,
      textStyle: { color:fontColor }
    },
    // toolbox: {
    //   feature: {
    //     magicType: { type: ['line', 'bar'] }
    //   },
    // },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '5%',
      top: "15%",
      containLabel: true
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: { color:lineColor },
      },
      splitLine: {
        lineStyle: { color:lineColor },
      },
      axisLabel: { color:fontColor, align: 'right' }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
      axisLine: {
        lineStyle: { color:lineColor },
      },
      splitLine: {
        lineStyle: { color:lineColor },
      },
      axisLabel: { interval:0,color:fontColor, align: 'center' }
    },
    series: []
  }
  processData()
}

onMounted(() => {
  processOption();
})
</script>
<template>
  <echartsInit :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less">
</style>
